<template>
  <div class="report-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <div class="report-content">
      <div class="filter-container flex-row">
        <el-input
          v-model="tableListQuery.keyword"
          placeholder="请输入搜索内容"
          prefix-icon="el-icon-search"
          style="width:200px;"
          class="filter-item"
        />
        <el-button class="filter-item" type="primary" @click="getReportList">搜索</el-button>
        <el-select
          v-model="tableListQuery.type"
          placeholder="请选择报告类型"
          clearable
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getReportList"
        >
          <el-option label="检查报告" :value="0" />
          <el-option label="验房报告" :value="1" />
        </el-select>
        <el-date-picker
          v-model="tableListQuery.month"
          type="month"
          placeholder="请选择月份"
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getReportList"
        />
        <el-date-picker
          v-model="tableListQuery.checkDate"
          type="date"
          placeholder="请选择检查日期"
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getReportList"
        />
        <el-date-picker
          v-model="tableListQuery.issueDate"
          type="date"
          placeholder="请选择发出日期"
          class="filter-item"
          style="width:150px;margin-left:15px;"
          @change="getReportList"
        />
        <el-button
          class="filter-item"
          type="primary"
          style="margin-left:auto;"
          @click="addReportClick"
        >新增</el-button>
      </div>
      <report-table :report-list="reportList" @handelDel="handleDel" @handleDetail="reportDetail" @handleEdit="edit" /><br>
      <el-pagination
        :v-show="total > 0"
        background
        :current-page="tableListQuery.page"
        :page-sizes="[10, 20, 50,100]"
        :page-size="tableListQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      title=""
      width="1073px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="showAdd"
      destroy-on-close
      @closed="addDialogClosed"
    >
      <h2 v-if="isEdit===false">新增报告<i class="el-icon-close" @click="close" /></h2>
      <h2 v-else>编辑报告<i class="el-icon-close" @click="close" /></h2>
      <div class="digoDiv">
        <el-form
          v-if="showAdd"
          ref="reportForm"
          :model="reportForm"
          :label-position="'left'"
          :rules="rules"
          label-width="64px"
          class="formDiv"
        >
          <el-form-item label="房产">
            <el-select v-model="reportForm.houseId" filterable placeholder="请输入关键字：房产（地址/ID）" style="width:100%" @change="selectHouse">
              <el-option
                v-for="item in houseList"
                :key="item.id"
                :label="item.address"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <div class="flex-row">
            <el-form-item label="报告类型" style="margin-right:20px">
              <el-select v-model="reportForm.type" filterable placeholder="请输入报告类型" style="width:150px">
                <el-option label="检查报告" :value="0" />
                <el-option label="验房报告" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="reportForm.type===0" label="租赁时间" style="margin-right:20px;">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                range-separator="-"
                start-placeholder="请选择起始日"
                end-placeholder="请选择截止日"
                style="width:260px"
                @change="selectDaterange"
              />
            </el-form-item>
            <el-form-item v-if="reportForm.type===0" label="租客" prop="userName" label-width="40px" style="margin-right:20px">
              <el-input v-model="reportForm.userName" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item v-if="reportForm.type===0" label="租金" prop="rentFee" label-width="40px">
              <el-input v-model="reportForm.rentFee" placeholder="请输入" style="width:120px" />
            </el-form-item>
            <el-form-item v-if="reportForm.type===1" label="验房日期" style="margin-right:20px">
              <el-date-picker
                v-model="reportForm.checkDate"
                type="date"
                placeholder="请选择日期"
                style="width:150px"
              />
            </el-form-item>
            <el-form-item v-if="reportForm.type===1" prop="userName" label="验房人员" style="margin-right:20px">
              <el-input v-model="reportForm.userName" placeholder="请输入" style="width:120px" />
            </el-form-item>
          </div>

          <div class="flex-row borbtoonline">
            <el-form-item v-if="reportForm.type===0" label="检查日期" style="margin-right:20px">
              <el-date-picker
                v-model="reportForm.checkDate"
                type="date"
                placeholder="请选择检查日期"
                style="width:150px"
              />
            </el-form-item>
            <el-form-item v-if="reportForm.type===0" label="维修建议">
              <el-select v-model="reportForm.suggestion" filterable placeholder="请选择有无建议">
                <el-option label="无" :value="0" />
                <el-option label="有" :value="1" />
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="报告概述">
            <el-input v-model="reportForm.remark" :rows="4" type="textarea" placeholder="请输入..." />
          </el-form-item>

          <el-form-item label="报告文件">
            <bill-file-upload
              v-model="reportForm.filePath"
              dir="payment"
              name="上传报告文件"
              :maxcount="10"
              format="png,pdf,jpg,jpeg"
              :urls="reportForm.filePath"
              @getFile="getFile"
            />
          </el-form-item>

          <el-form-item v-if="reportForm.type===0" label="上传视频">
            <bill-file-upload
              v-model="reportForm.videoPath"
              dir="payment"
              name="上传"
              :maxcount="10"
              format="mp4"
              :urls="reportForm.videoPath"
              @getFile="getVideo"
            />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="!isEdit" plain type="primary" class="dialog-footer-btn white-bg-btn" @click="saveReport">保存</el-button>
        <el-button v-else-if="isEdit && reportForm.status === 0" plain type="primary" class="dialog-footer-btn white-bg-btn" @click="editReport(0)">保存</el-button>
        <el-button v-else plain type="primary" class="dialog-footer-btn white-bg-btn" @click="editReport(1)">保存</el-button>
        <el-button v-if="!isEdit" type="primary" class="dialog-footer-btn" @click="sendReport">确认发出</el-button>
        <el-button v-if="isEdit && reportForm.status === 0" type="primary" class="dialog-footer-btn" @click="editReport(1)">确认发出</el-button>
        <el-button type="info" class="dialog-footer-btn" @click="close">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      width="650px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="showDel"
    >
      <h2>确认删除<i class="el-icon-close" @click="showDel = false" /></h2>
      <div class="digoDiv">
        <div class="dialog-content flex-row">
          <svg-icon class="warning-icon" icon-class="warning" /><span class="dialog-tip-text">确认删除该条报告吗？</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" class="dialog-footer-btn" @click="delReport(reportId)">确认</el-button>
        <el-button type="info" class="dialog-footer-btn" @click="showDel = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { pageByOperation } from '@/api/house'
import { addReport, getReportList, delReport, getReport, editReport } from '@/api/report'
import ReportTable from './components/ReportTable.vue'
import BillFileUpload from '@/components/Upload/BillFileUpload.vue'
export default {
  components: {
    Breadcrumb,
    ReportTable,
    BillFileUpload
  },
  data() {
    const checkFee = (rule, value, callback) => {
      if (!value || +value === 0) {
        callback()
      }
      if (!Number(value * 1)) {
        callback(new Error('请输入数字值'))
      } else {
        if (value * 1 > 999999) {
          callback(new Error('金额不大于999999'))
        } else {
          callback()
        }
      }
    }
    const checkName = (rule, value, callback) => {
      if (!value || +value === 0) {
        callback()
      }
      if (value.length > 30) {
        callback(new Error('名字不超过30个字符'))
      } else {
        callback()
      }
    }
    return {
      daterange: [],
      value: '',
      houseList: [],
      houseListQuery: {
        page: 1,
        limit: 10000
      },
      listQuery: {
        keyword: undefined,
        month: undefined,
        property: undefined,
        status: undefined
      },
      reportList: [],
      tableListQuery: {
        page: 1,
        limit: 10,
        keyword: undefined,
        type: undefined,
        month: undefined,
        issueDate: undefined,
        checkDate: undefined
      },
      loading: false,
      total: 0,
      showAdd: false,
      showDel: false,
      isEdit: false,
      reportId: undefined,
      defaultForm: {
        type: 0,
        houseId: '',
        billDate: '',
        beginDate: '',
        checkDate: '',
        endDate: '',
        userName: '',
        remark: '',
        rentFee: undefined,
        filePath: '',
        suggestion: undefined,
        videoPath: '',
        status: 0
      },
      reportForm: {
        type: 0,
        houseId: '',
        billDate: '',
        beginDate: '',
        checkDate: '',
        endDate: '',
        userName: '',
        remark: '',
        rentFee: undefined,
        filePath: '',
        suggestion: undefined,
        videoPath: '',
        status: 0
      },
      rules: {
        rentFee: [{ validator: checkFee, trigger: 'blur' }],
        userName: [{ validator: checkName, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getReportList()
    if (this.$route.query.id) {
      this.reportForm.houseId = this.$route.query.id
      this.addReportClick()
    }
  },
  methods: {
    addReportClick() {
      this.getHouseList()
      this.showAdd = true
    },
    close() {
      this.isEdit = false
      this.showAdd = false
      this.reportForm = { ...this.defaultForm }
      this.daterange = []
    },
    addDialogClosed() {
      this.isEdit = false
      this.showAdd = false
      this.reportForm = { ...this.defaultForm }
      this.daterange = []
    },
    getHouseList() {
      pageByOperation(this.houseListQuery).then(response => {
        this.houseList = response.data.records
      })
    },
    getReportList() {
      this.loading = true
      getReportList(this.tableListQuery).then(response => {
        this.reportList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.tableListQuery.page = 1
      this.tableListQuery.limit = val
      this.getBillList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.tableListQuery.page = val
      this.getBillList()
    },
    selectHouse(val) {
      console.log(val)
    },
    selectDaterange(list) {
      this.reportForm.beginDate = list[0]
      this.reportForm.endDate = list[1]
    },
    saveReport() {
      this.reportForm.status = 0
      addReport(this.reportForm).then(response => {
        this.showAdd = false
        this.reportForm = { ...this.defaultForm }
        this.daterange = []
        this.getReportList()
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    sendReport() {
      this.reportForm.status = 1
      addReport(this.reportForm).then(response => {
        this.showAdd = false
        this.reportForm = { ...this.defaultForm }
        this.daterange = []
        this.getReportList()
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    editReport(status) {
      this.reportForm.status = status
      editReport({ ...this.reportForm, id: this.reportId }).then(response => {
        this.showAdd = false
        this.reportForm = { ...this.defaultForm }
        this.daterange = []
        this.getReportList()
        this.$notify({
          title: '成功',
          message: '编辑成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDel(id) {
      this.showDel = true
      this.reportId = id
    },
    delReport(id) {
      delReport(id).then(response => {
        this.showDel = false
        this.getReportList()
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    reportDetail(id) {
      const routeUrl = this.$router.resolve({ path: '/report', query: { id: id }})
      window.open(routeUrl.href, '_blank')
    },
    edit(id) {
      getReport(id).then(response => {
        this.reportId = id
        this.isEdit = true
        this.getHouseList()
        Object.keys(this.reportForm).map(i => {
          this.reportForm[i] = response.data[i]
        })
        this.daterange = [this.reportForm.beginDate, this.reportForm.endDate]
        this.showAdd = true
      })
    },
    getFile(val) {
      console.log('val.toString():', val.toString())
      this.reportForm.filePath = val.toString()
    },
    getVideo(val) {
      console.log('val.toString():', val.toString())
      this.reportForm.videoPath = val.toString()
    }
  }
}
</script>

<style lang="scss">
.report-container {
  .no-number::-webkit-outer-spin-button,
  .no-number::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none !important;
  }

  .no-number input[type="number"]::-webkit-outer-spin-button,
  .no-number input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none !important;
  }

  /*在firefox下移除input[number]的上下箭头*/
  .no-number {
    -moz-appearance: textfield;
  }

  .no-number input[type="number"] {
    -moz-appearance: textfield;
  }
}

</style>

<style lang="scss" scoped>
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5AC6B7;
    transform: translateY(-50%);
  }
}

.report-content {
  padding: 10px;
}

.myDigo h2 {
  height: 32px;
  background: #343436;
}

.form-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 20px;
}

::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}

::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}

.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}

.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}

::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}

.digoDiv ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    text-indent: 5px;
}

::v-deep .inputTop input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input:-moz-placeholder,
textarea:-moz-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input::-moz-placeholder,
textarea::-moz-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .inputTop input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select::-webkit-input-placeholder {
  font-size: 12px;
}

::v-deep .el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-form-item--medium .el-form-item__label {
  color: #101010;
  font-size: 12px;
  font-weight: bold;
}

.nonbg-btn {
  background: none;
}

.mtright {
  margin-right: 11px;
}

.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  overflow: hidden;
}

.borbtoonline {
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}

.borbtoonline::after {
  content: "";
  position: absolute;
  left: -51px;
  bottom: 0;
  width: 111%;
  height: 1px;
  background: #f0f0f0;
}

.borbtoonline .el-form-item {
  margin-bottom: 0;
}

.el-icon-remove-outline {
  margin-left: 20px;
  display: inline-block;
  color: #5AC6B7;
  font-weight: bold;
  transform: scale(1.5);
}

.white-bg-btn {
  background: #fff;
}

.dialog-footer-btn {
  width: 100px;
}

.form-note-text {
  font-size: 12px;
  font-weight: bold;
  color: #101010;
}

.dialog-content {
  height: 150px;
  padding: 0 60px;
  align-items: center;
}

.warning-icon {
  margin-right: 20px;
  height: 24px;
  width: 24px;
  fill: #F45656;
}

.dialog-tip-text {
  display: inline-block;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  color: rgba(28, 28, 28, 100);
}
</style>
